<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>凑单品页面</title>
    <link rel="stylesheet" href="../css/conment.css">
    <link rel="stylesheet" href="../css/gsproduct.css">
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../fonts/css/font-awesome.css">

</head>


<body>
    <!-- 头部 -->
    <header>
        <div class="font-left">
            <a href="../index.html"><i class="fa fa-angle-left fa-2x"></i></a>
        </div>
        <div class="content">
            凑单品
        </div>
        <div class="font-right">
            <i class="fa fa-download fa-2x"></i>
        </div>
    </header>

    <!-- 下拉菜单 -->
    <nav class="navbar navbar-default" role="navigation">
        <ul class="nav navbar-nav">
            <li class="dropdown shop">

            </li>
            <li class="dropdown shoparea">

            </li>
            <li class="dropdown price">
                <a href="#" class="dropdown-toggle " data-toggle="dropdown">
                    全部价格
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">10元</a></li>
                    <li><a href="#">100元</a></li>
                    <li><a href="#">1000元</a></li>
                </ul>
            </li>
            <div class="search">
                <i class="fa fa-search fa-lg"></i>
            </div>
        </ul>

    </nav>

    <!-- 商品部分 -->
    <div class="product">
        <ul class="productList">

            <!-- <li class="productList">
                <a href="">
                    <img src="http://img10.360buyimg.com/n7/jfs/t19249/136/1326656480/58167/e60034f4/5ac33204N85fb466f.jpg" alt="">
                    <div class="font">新雅 广式莲蓉月饼 100g/袋</div>
                    <div id="price"><span>￥0.50</span><span>去凑单</span></div>
                </a>
            </li> -->
        </ul>
    </div>

    <!-- 底部 -->
    <footer>
        <div>
            <span>登陆</span>
            <span>注册</span>
            <span id="footer-stick"><i class="fa fa-arrow-up" aria-hidden="true"></i>返回顶部</span>
        </div>
        <div>
            <span>手机APP下载</span>
            <span>慢慢卖手机版</span>
            <span>--掌上比价平台</span>
            <span>m.manmanbuy.com</span>
        </div>
    </footer>

</body>
<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
<script src="../js/8-product.js"></script>
<script src="../lib//template/template.js"></script>
<script src="../js/animate.js"></script>
<script src="../js/base.js"></script>
<script src="../lib/zepto/zepto.js"></script>
<script src="../lib/zepto/event.js"></script>
<script src="../lib/zepto/touch.js"></script>
<!-- 店铺模板 -->
<script id="shopListTem" type="text/template">
    <a href="#" class="dropdown-toggle " data-toggle="dropdown">
            京东
            <b class="caret"></b>
        </a> {{each result as val key}}
    <ul class="dropdown-menu">
        <li><a href="#">{{val.shopName}}</a></li>

    </ul>
    {{/each}}
</script>
<!-- 地区模板 -->
<script id="shopareaListTem" type="text/template">
    <a href="#" class="dropdown-toggle " data-toggle="dropdown">
                华北 
                <b class="caret"></b>
            </a> {{each result as val key}}
    <ul class="dropdown-menu">
        <li><a href="#">{{val.areaName}}</a></li>
    </ul>
    {{/each}}
</script>


<!-- 商品模板 -->
<script id="productListTmp" type="text/template">
    {{each result as val key}}
    <li>

        <a href="">
            <img src="{{val.productImg}}" alt="">
            <div class="font">{{val.productName}}</div>
            <div id="price"><span>{{val.productPrice}}</span><span>去凑单</span></div>
        </a>
    </li>
    {{/each}}
</script>


<script>
    var shopid = 1;
    var areaid = 1;

    $.ajax({
        type: 'get',
        url: 'http://193.112.55.79:9090/api/getgsshop',
        dataType: 'json',
        success: function (res) {
            // console.log(res);
            var str = template('shopListTem', res);
            $('.shop').html(str);
        }
    })

    $.ajax({
        type: 'get',
        url: 'http://193.112.55.79:9090/api/getgsshoparea',
        dataType: 'json',
        success: function (res) {
            // console.log(res);
            var str = template('shopareaListTem', res);
            $('.shoparea').html(str);
        }
    })

    $.ajax({
        type: 'get',
        url: 'http://193.112.55.79:9090/api/getgsproduct',
        data: {
            shopid: shopid,
            areaid: areaid
        },
        dataType: 'json',
        success: function (res) {
            console.log(res);
            var str = template('productListTmp', res);
            $('.productList').html(str);
        }
    })

    // 鼠标点击后返回到顶部
    var stick = document.getElementById("footer-stick");
    stick.onclick = function () {
        //返回到的是顶端
        $('html,body').stop().animate({
            scrollTop: 0
        });
    }
</script>



</html>